<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册界面</title>
    <link rel="stylesheet" href="css/register.css">
</head>
<body>
    <div id="app">
        <div class="formBox">
            <div class="leftBackground"></div>
            <div class="rightForm">
                <h1>基础信息认证</h1>
                <span style="font-size:20px;color:#8B8B8B;">Basic information authentication</span>
                <div>
                    <div>学号</div>
                    <input type="text" id="inputUid" class="input" placeholder="请输入学号(Please enter the student id)" v-model="user.u_id" @blur="cid" style="margin-top: 0"/>
                    <div id="checkid" class="checkinfo">{{id_err}}</div>
                </div>
                <div>
                    <div>用户名</div>
                    <input type="text" id="inputUname" class="input" placeholder="请输入用户名(Please enter the user name)" v-model="user.u_name" @blur="cname">
                    <div id="checkname" class="checkinfo">{{name_err}}</div>
                </div>
                <div>
                    <div>密码</div>
                    <input type="text" id="inputPwd" class="input" placeholder="请输入密码(Please enter the password)" v-model="user.password" @blur="cpwd">
                    <div id="checkpassword" class="checkinfo">{{pw_err}}</div>
                </div>
                <div>
                    <div>邮箱</div>
                    <input type="text" id="inputemail" class="input" placeholder="请输入邮箱(Please enter the email address)" v-model="user.email" @keyup="cemail">
                    <div id="checkemail" class="checkinfo">{{emil_err}}</div>
                </div>
                <div>
                    <div>手机号</div>
                    <input type="text" id="inputphone" class="input" placeholder="请输入手机号(Please enter the phone number)" v-model="user.phone" @blur="cphone">
                    <div id="checkphone" class="checkinfo">{{phone_err}}</div>
                </div>

                <div class="buttons">
                    <input type="button" id="register" @click="register" value="完成注册">
                    <input type="button" id="back" @click="back" value="返回登录界面">
                </div>

            </div>


        </div>

    </div>

    <script src="js/jquery-3.6.0.slim.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/vue.global.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/my-axios.js"></script>
    <script src="layer/layer.js"></script>

    <script>
        //定义vue应用配置
        const app = {
            //data函数专门用来定义数据
            data(){
                return {
                    //定义登录数据
                    user:{
                        u_id:'',
                        u_name:'',
                        password:'',
                        email:'',
                        phone:''
                    },
                    loadIdx:null,
                    id_err:'学号不能为空',
                    name_err:'用户名不能为空',
                    emil_err:'邮箱不能为空',
                    phone_err:'电话号码不能为空',
                    pw_err:'密码不能为空'
                };
            },

            //定义方法
            methods : {
                //注册
                register(){
                    if(this.id_err==='学号格式正确' && this.emil_err==='邮箱格式正确' && this.phone_err==='电话号码格式正确' && this.name_err==='用户名格式正确' && this.pw_err==='密码格式正确'){
                        //将登录数据发送至服务器
                        this.loadIdx = layer.load();
                        myAxios.post('/register',this.user)
                            .then(res=>{
                                layer.close(this.loadIdx);
                                if(res.data.success){
                                    layer.msg('注册成功！', {icon: 1},()=>{
                                        window.location.href = 'login.html';
                                    });
                                }else{
                                    layer.msg(res.data.message, {icon: 2});
                                }
                            })
                            .catch(err=>{
                                layer.close(this.loadIdx);
                                layer.msg('系统错误！', {icon: 2});
                            });
                    }else {
                        layer.msg('注册失败', {icon: 2});
                    }
                },

                back(){
                    window.location.href = 'login.html';
                },

                cid(){
                    var ii = /^[1-9]\d{9}$/;
                    if(!this.user.u_id) {
                        this.id_err="学号不能为空";
                        return false;
                    }
                    this.id_err = "";
                    if(!ii.test(this.user.u_id)) {
                        this.id_err="学号格式非法";
                        return false;
                    } else {
                        this.id_err="学号格式正确";
                        return true;
                    }
                },

                cemail(){
                    //邮箱的正则表单达式
                    var aa = /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;
                    if(!this.user.email) {
                        this.emil_err="邮箱不能为空";
                        return false;
                    }
                    this.emil_err = "";
                    if(!aa.test(this.user.email)) {
                        this.emil_err="邮箱格式非法";
                        return false;
                    } else {
                        this.emil_err="邮箱格式正确";
                        return true;
                    }
                },

                cphone(){
                    var pp = /^1[0-9]{10}$/
                    if(!this.user.phone) {
                        this.phone_err="电话号码不能为空";
                        return false;
                    }
                    this.phone_err = "";
                    if(!pp.test(this.user.phone)) {
                        this.phone_err="电话号码格式非法";
                        return false;
                    } else {
                        this.phone_err="电话号码格式正确";
                        return true;
                    }
                },

                cname(){
                    if(!this.user.u_name) {
                        this.name_err="用户名不能为空";
                        return false;
                    }else {
                        this.name_err='用户名格式正确'
                    }
                },

                cpwd(){
                    if(!this.user.password) {
                        this.pw_err="密码不能为空";
                        return false;
                    } else{
                        this.pw_err="密码格式正确"
                    }
                },
            },

        };

        Vue.createApp(app).mount('#app')
    </script>
</body>
</html>